import React from 'react';
import { StyleSheet, Image, Text, View, TouchableOpacity } from 'react-native';
const tabBarArr = [
    { 'name': '首页', keyName:'Home', styleKey: 'homeIcon', icon: require('../assets/images/home-on.png')},
    { 'name': '虚戈', keyName:'Xuge', styleKey: 'xugeIcon', icon: require('../assets/images/live-off.png')},
    { 'name': '', keyName:'Issue', styleKey: 'issueIcon', icon: require('../assets/images/issue.png')},
    { 'name': '商城', keyName:'Choose', styleKey: 'chooseIcon', icon: require('../assets/images/play-off.png')},
    { 'name': '我的', keyName:'Mine', styleKey: 'mineIcon', icon: require('../assets/images/my-off.png')}
];
class CustomStatusBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    componentDidMount() {

    }

    render() {
        return <View style={styles.navBootmoBar}>
            {
                tabBarArr.map((item, index) => {
                    console.log(item.styleKey)
                    return <View key={index} style={item.styleKey=='issueIcon'?styles.navBootmoBarIssue:styles.navBootmoBarItem}>
                        <TouchableOpacity
                            activeOpacity={0.5}
                            onPress={() => {this.props.navigation.navigate(item.keyName);}}
                        >
                            <Image style={styles[item.styleKey]} source={item.icon} />
                            <Text style={styles.itemText}>{item.name}</Text>
                        </TouchableOpacity>

                    </View>
                })
            }
        </View>;
    }
}
const styles = StyleSheet.create({
    navBootmoBar: {
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
        height: 60,
        backgroundColor: 'rgba(0,0,0,0.3)',
        position: 'absolute',
        left: 0,
        bottom: 0
    },
    navBootmoBarItem: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    navBootmoBarIssue:{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    tabIcon: {
        width: 22,
        height: 22,
    },
    //icon
    homeIcon: {
        width: 22,
        height: 22,
    },
    xugeIcon: {
        width: 27.85,
        height: 22,
    },
    issueIcon: {
        width: 45,
        height: 45,
        marginTop:12,
    },
    chooseIcon: {
        width: 22,
        height: 22,
    },
    mineIcon: {
        width: 16.75,
        height: 22
    },
    itemText: {
        color:'#c1c1c1',
        marginTop: 11,
        fontSize:11
    }
})
export default CustomStatusBar;